import { createStore, Store, useStore as baseUseStore } from 'vuex'
import { InjectionKey } from 'vue'
import app, { AppState } from './modules/app'
import getters from './getters'
import permission, { PermissionState } from './modules/permission'

export interface GloableState {
  app: AppState,
  permission: PermissionState
}

// 定义 injection key
export const key: InjectionKey<Store<GloableState>> = Symbol('store')

export const store = createStore<GloableState>({
  modules: {
    app,
    permission
  },
  getters
})

export function useStore () {
  return baseUseStore(key)
}

// export interface State {
//   count: number,
//   foo: string
// }

// 创建一个新的 store 实例
// export const store = createStore<State>({
//   state () {
//     return {
//       count: 0,
//       foo: 'hello'
//     }
//   },
//   mutations: {
//     increment (state) {
//       state.count++
//     }
//   }
// })
